@use '@angular/material' as mat;
@use '@covalent/tokens' as variables;
@import '../../../libs/angular/theming/all-theme';
@import '../../../libs/markdown/markdown-theme';
@import '../../../libs/angular-highlight/highlight-theme';
@import '../../../libs/markdown-flavored/flavored-markdown-theme';
@import '../../../libs/markdown-navigator/markdown-navigator-theme';
@import '../../../libs/angular-guided-tour/guided-tour-theme';
@import '../../../libs/angular-guided-tour/styles/guided-tour.scss';
// Teradata brand
@import '../../../libs/angular/theming/teradata-theme';

// Import Inter styles from google apis CDN
@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500');

// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat.core();

// Use the default configuration.
@include mat.typography-hierarchy($td-custom-typography);

// Setting the toolbar to the proper spec weight
@include mat.toolbar-typography($td-custom-toolbar-typography);

// Include the core styles for Covalent
@include covalent-core();

// Include material icons
$mat-font-url: './';
@include covalent-material-icons();

// Include covalent utility classes
@include covalent-utilities();

// Include flex layout classes
@include covalent-layout();

// Include covalent color classes
@include covalent-colors();

$background: map-get($td-light-theme, background);
@include mat.core-theme($td-light-theme);
@include mat.all-component-themes($td-light-theme);
@include covalent-theme($td-light-theme);
@include covalent-markdown-theme($td-light-theme);
@include covalent-highlight-theme($td-light-theme);
@include covalent-flavored-markdown-theme($td-light-theme);
@include covalent-markdown-navigator-theme($td-light-theme);
@include covalent-markdown-navigator-typography($td-custom-typography);
@include covalent-guided-tour-theme($td-light-theme);
@include teradata-brand($td-light-theme);

.mat-app-background {
  background-color: map-get($background, background);
}

.cv-surface-high {
  background-color: variables.$theme-light-colors-surface-container-high;
}

.icon-avatar {
  background-color: variables.$theme-light-colors-surface-container;
}

body .mat-card {
  border-radius: 8px;
}

// Dark theme
.theme-dark {
  $background: map-get($td-dark-theme, background);
  @include mat.core-theme($td-dark-theme);
  @include mat.all-component-colors($td-dark-theme);
  @include covalent-theme($td-dark-theme);
  @include covalent-markdown-theme($td-dark-theme);
  @include covalent-highlight-theme($td-dark-theme);
  @include covalent-flavored-markdown-theme($td-dark-theme);
  @include covalent-markdown-navigator-theme($td-dark-theme);
  @include covalent-guided-tour-theme($td-dark-theme);
  @include teradata-brand($td-dark-theme);

  .mat-app-background {
    background-color: map-get($background, background);
  }

  .cv-surface-high {
    background-color: variables.$theme-dark-colors-surface-container-high;
  }

  .icon-avatar {
    background-color: variables.$theme-dark-colors-surface-container;
  }
}

/* ------------------------------------------------------------------------------- */

// Apply theme for this app
.bgc-contrast {
  background-color: #ececec;
}

.td-markdown {
  h1,
  h2,
  h3 {
    font-weight: 400 !important;
  }
}
